<template>
  <div>
    <div class="tabview newsPageDiv">
      <img src="@/assets/banner_waterdrop.png" />
      <div class="nav-title-div">
        <div class="nav-title-text-div">
          <span class="nav-title-text-div-span">新闻通知</span>
        </div>
      </div>
      <div class="news-nav-div">
        <a-layout>
          <a-layout-sider
            style="flex: 0 0 240px;max-width: 240px;min-width: 240px;width:240px;margin-top: 40px;"
            >
            <a-menu theme="dark" :default-selected-keys="[menukey]" :selectedKeys="[menukey]" mode="vertical" @click="onLeftMenuClick">
              <a-menu-item key="1">
                <router-link to="/center/newsPage/noticePage">
                  <span>通知公告</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="2">
                <router-link to="/center/newsPage/focusNewsPage">
                  <span>新闻动态</span>
                </router-link>
              </a-menu-item>
            </a-menu>
          </a-layout-sider>
          <a-layout>
            <a-layout-content style="margin: 0 16px">
              <Breadcrumb />
              <router-view></router-view>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
  
       <!-- <footerPage :page="2"  :style="{'margin-top': footMarginTop}"></footerPage> -->
  
  </div>
</template>

<script>
// import footerPage from '../footer/footerPage';
import Breadcrumb from "@/components/base/tools/Breadcrumb";
import emv from "@/views/center/emptyVue.vue";
export default {
  name: "news",
  inject:['changeTab'],
  components: {
    //  footerPage,
    Breadcrumb,
  },
  data() {
    return {
      collapsed: true,
      menukey:'1',
      footMarginTop:'',
    };
  },
   mounted(){ 
            emv.$on("setMenuKey",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
                this.menukey = val;
            });
  },
  created(){
      // this.menukey = this.$store.state.menuKey.key;
      this.changeTab(1,"newsPage","<span class=\"tab_name\">新闻通知</span>");
  },
  methods:{
   onLeftMenuClick({ key }) {
     this.menukey=key;
    //  this.$store.commit('menuKey/setKey', this.menukey); 
   },
  },
  beforeRouteEnter(to, from, next) {
      // 设置下一个路由的 meta
      next(vm=>{
            vm.menukey = to.meta.mkey;
         })
    },
};
</script>
<style lang="less">
.newsPageDiv > img {
  width: 100%;
  max-width: 100%;
  margin-top: -2.5px;
  height: 120px;
}
.nav-title-div {
  height: 80px;
  margin-top: -40px;
  position: absolute;
  z-index: 999;
  .nav-title-text-div {
    width: 240px;
    height: 80px;
    line-height: 80px;
    background: #337bd7;
    float: left;
    .nav-title-text-div-span {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-left: 20px;
    }
  }
  //  .breadcrumb-div{
  //    float: left;
  //    height: 12px;
  //    margin-top: 36px;
  //    margin-left: 20px;
  //    .breadcrumb{
  //       font-size: 12px;
  //       font-family: SimSun;
  //       font-weight: 400;
  //       //color: #666666;
  //       .ant-breadcrumb-separator {
  //           margin: 0px 0px;
  //           color: rgba(0, 0, 0, 0.45);
  //       }
  //    }
  //  }
}

.news-nav-div {
  width: 100%;
  background: #fff;
  .ant-layout.ant-layout-has-sider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    background:#fff;
   }
  .ant-layout-sider {
    position: relative;
    min-width: 0;
    background: #001529;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    background: #fff;
    .ant-layout-sider-children {
      height: 100%;
      margin-top: -3.7px;
      padding-top: 0.1px;
    }
  }
  .ant-menu-dark.ant-menu-inline,
  .ant-menu-dark.ant-menu-vertical,
  .ant-menu-dark.ant-menu-vertical-left,
  .ant-menu-dark.ant-menu-vertical-right {
    // height: 92px;
    border-right: 0;
    width: 240px;
    background: #337bd7;
    padding-left: 20px;
  }

  .ant-menu-dark.ant-menu-inline .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical-left .ant-menu-item,
  .ant-menu-dark.ant-menu-vertical-right .ant-menu-item {
    left: 0;
    margin-left: 0;
    border-right: 0;
    background: #fff;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    border-bottom: 0.1px solid #ccc;
    height: 60px;
    line-height: 60px;
  }
  .ant-menu.ant-menu-dark .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background-color: #fff;
    color: #337bd7;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
  }
  .ant-menu-dark .ant-menu-item,
  .ant-menu-dark .ant-menu-item-group-title,
  .ant-menu-dark .ant-menu-item > a {
    color: #000;
  }
  .ant-menu-dark .ant-menu-item-selected > a,
  .ant-menu-dark .ant-menu-item-selected > a:hover {
    color: #337bd7;
  }
  .ant-menu-vertical .ant-menu-item:not(:last-child),
  .ant-menu-vertical-left .ant-menu-item:not(:last-child),
  .ant-menu-vertical-right .ant-menu-item:not(:last-child),
  .ant-menu-inline .ant-menu-item:not(:last-child) {
    margin-bottom: -4px;
  }
  .ant-menu-vertical > .ant-menu-item,
  .ant-menu-vertical-left > .ant-menu-item,
  .ant-menu-vertical-right > .ant-menu-item,
  .ant-menu-inline > .ant-menu-item,
  .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    height: 44px;
    line-height: 44px;
    margin-bottom: 0px;
  }
  .ant-layout.ant-layout-has-sider > .ant-layout,
  .ant-layout.ant-layout-has-sider > .ant-layout-content {
    overflow-x: hidden;
    background: #fff;
    padding-left: 41px;
    overflow-y: hidden;
    .ant-breadcrumb {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-variant: tabular-nums;
      // line-height: 3.3;
      margin-top: 24px;
      margin-bottom: 24px;
      list-style: none;
      -webkit-font-feature-settings: "tnum";
      font-feature-settings: "tnum";
      color: #666666;
      font-size: 13px;
    }
  }
}
</style>